<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<ui:composition template="/templates/showcaseLayout.xhtml">
    <ui:define name="centerContent">
        <f:facet name="header">
            <h:outputText value="Layout"/>
        </f:facet>
        <h:panelGroup layout="block" styleClass="centerContent">
            Layout creates a border layout that has auto-sizing 'center pane' surrounded by up to four closable and resizable 'border panes' (north, south, east and west). It can also create multiple headers inside each pane.
            For more complex layouts you can nest layouts within layouts. Possibilities are unlimited - from simple fixed headers or sidebars to rich applications.
            Each layout pane can be closed, opened and resized, within automatic or specified limits. You can use layout either for an entire page (full page layout) or for a specific region in the page (element layout).
            Furthermore, any custom content can be placed between layout panes. There are also client-side and server-side state management.
            <p/>
            The layout in PrimeFaces Extensions is described by model which binds all layout options together.
            Layout options are built up by the class <strong>LayoutOptions</strong>.
            By this way, you can use all available options from the underlying jQuery layout plugin.
            Please refer the documentation to learn all options:
            <p/>
            <a href="http://layout.jquery-dev.net/documentation.cfm#Options" target="_blank">Overview of Layout Options</a>
            <p/>
            <a href="http://layout.jquery-dev.net/changelog.cfm" target="_blank">Changelog, Using Examples</a>
            <p/>
            Another way to specify options is setting options as attributes of layout pane (pe:layoutPane).
            By this way, no model class LayoutOptions is needed, but the possibilities are limited.
            It is not possible to introduce a lot of various options via tag attributes of pe:layoutPane. The number of options is too big.
            Only mostly used options are available via tag attributes.
            <p/>
            Another advantage of the <strong>options</strong> attribute
            is the performance. This attribute points to an instance of the class LayoutOptions or an JSON String representing serialized LayoutOptions.
            Serializing of layout options to an JSON string can increase the time of layout building when the layout is built during application startup
            in an application scoped bean (LayoutOptions gets always serialized to JSON to be able to be used in the underlying widget).
            Use the method <strong>toJson()</strong> in the LayoutOptions if you want to serialize all options to an JSON string.
        </h:panelGroup>
    </ui:define>
    <ui:define name="useCases">
        <ui:include src="/sections/layout/useCasesChoice.xhtml"/>
    </ui:define>
    <ui:define name="docuTable">
        <ui:include src="/sections/shared/twoTabsDocumentation.xhtml">
            <ui:param name="tagName1" value="layout"/>
            <ui:param name="tagName2" value="layoutPane"/>
        </ui:include>
    </ui:define>
</ui:composition>
</html>
